<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .editPanel{
           width:800px;
           border:1px solid #ccc;
           border-radius: 5px;
           margin:20px auto;
           padding: 10px;
       }
       .editPanel>label{
           margin:10px;
       }
       .editPanel input{
           font-size: 14px;
           color:#444;
           padding:3px;
       }
       .editPanel input[type=text]{
        width:100px;
       }
       .list{
          width:840px;
          border: 1px solid #ddd;
          margin:10px auto;
       }
       .list table{
           width:100%;
           border-collapse: collapse;
           border: 1px solid #ccc;
           font-size: 14px;
           font-family: "Microsoft YaHei";
           line-height: 14px;
           color: #444;
       }
       .list thead{
           background-color: #369;
           color:#fff;
           font-weight: bold;
           font-size: 16px;
       }
       .list th, .list td{
           border: 1px solid #ccc;
           padding:10px;
          text-align: center;
       }
       .list tbody a{
           color: red;
           text-decoration: none;
       }
    </style>
</head>
<body>
    <div class="course" id="course">
        <div class="editPanel">
            <label for="">序号:<input type="text" v-model="id"></label>
            <label for="">课程:<input type="text" v-model="cname"></label>
            <label for="">教师:<input type="text" v-model="teacher" @keyup.enter="add"></label> 
            <input type="button" value="添加" @click="add">
            <label for="" class="search">搜索: <input type="text" v-model="keyword" @keyup="search(keyword)" ></label>
        </div>
    
    <div class="list">
        <table>
            <thead>
                <tr>
                    <th class="firstCol">序号</th>
                    <th>课程</th>
                    <th>教师</th>
                    <th>时间</th>
                    <th>操作</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody> 
                <tr v-for="item in search(keyword)" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.cname}}</td>
                    <td>{{item.teacher}}</td>
                    <td>{{item.time|timeFormat('cn')}}</td>
                    <td><a href="" @click.prevent="del(item.id)">删除</a></td>
                    <td><a href="" @click.prevent="change">修改</a></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
    <script src="vue.js"></script>
    <script>
        var vm =new Vue({
            el:"#course",
            data:{
                id:'',
                cname:'',
                teacher:'',
                time:new Date(),
                keyword:'',
                list:[
                    {"id":1, 'cname':'马克思主义','teacher':'刘晓阳',time:'2018-9-3'},
                    {"id":2, 'cname':'Javascript','teacher':'东哥',time:'2018-9-3'},
                    {"id":3, 'cname':'ASP.NET','teacher':'李东琦',time:'2018-9-3'},
                ]
            },
            methods:{
                add:function(){
                    if(this.id.length > 0 && this.cname.length > 0 && this.teacher.length > 0){
                        this.list.push({'id':this.id, 'cname':this.cname,'teacher':this.teacher,time:this.time});

                    }else{
                        alert('请填入完整的课程信息');
                    }
                },

                del:function(id){
                    for(var i=0;i<this.list.length;i++){
                        if(this.list[i].id==id){
                            this.list.splice(i,1);
                        }
                    }
                },

                search:function(keyword){
                    var result = [];
                    for(var i=0; i<this.list.length; i++){
                        if(this.list[i].cname.toLowerCase().indexOf(keyword.toLowerCase()) > -1){
                            result.push(this.list[i]);
                        }
                    }
                    return result;
                },

                change:function(){
                     for(var i=0;i<this.list.length;i++){
                         if(this.list[i].id == vm.id){
                            this.list[i].cname=vm.cname;
                            console.log(this.list[i].id);
                            console.log(vm.id);

                            this.list[i].teacher=vm.teacher;
                         }
                     }
                },

            },

            filters: {  //过滤器
                    timeFormat:function(dateStr,pattern){
                        var date = new Date(dateStr);
                        var year = date.getFullYear();
                        var month =date.getMonth() + 1;
                        var day = date.getDate();
                        var result = '';
                        if(pattern){
                            switch(pattern.toLowerCase()){
                                case 'cn':
                                 result = year + '年' + month +'月' + day + '日';
                                 break;

                                 case 'en':
                                 result = year + '-' + month +'-' + day;
                                 break;  

                                 default:
                                 result = year + '.' + month +'.' + day;
                                 break;
                            }
                        }else{
                                result = year + '.' + month +'.' + day;
                            }
                            return result;
                    }
                }
        })
    </script>
</body>
</html>